<template>
	<div class="course-detail-view-rd">
		<div class="my-video-box">
			<page-header :title="'1-1组件种类和JS分层'">
				<div class="header-component">
					<a href="javascript:;" class="share-btn"></a>
				</div>
			</page-header>
			<video-player  class="video-player-box"
		                ref="videoPlayer"
		                :options="playerOptions"
		                :playsinline="true"
		                customEventName="customstatechangedeventname">
<!-- 		                @play="onPlayerPlay($event)"
		                @pause="onPlayerPause($event)"
		                @ended="onPlayerEnded($event)"
		                @waiting="onPlayerWaiting($event)"
		                @playing="onPlayerPlaying($event)"
		                @loadeddata="onPlayerLoadeddata($event)"
		                @timeupdate="onPlayerTimeupdate($event)"
		                @canplay="onPlayerCanplay($event)"
		                @canplaythrough="onPlayerCanplaythrough($event)"
		                @statechanged="playerStateChanged($event)"
		                @ready="playerReadied" -->
		  </video-player>
		</div>
		<div class="course-func-wrap">
			<div class="course-func-tab">
				<div class="learn-menu">
				    <a href="javascript:;" @click="curType = 'intro'" :class="{active: curType == 'intro'}">介绍</a>
				    <a href="javascript:;" @click="curType = 'list'" :class="{active: curType == 'list'}">章节</a>
				</div>
			</div>
			<div class="course-list">
				<div class="course-intro" v-show="curType == 'intro'">
					<div class="course-intro__intro">
						<p>衡量攻城师能力是否成熟的重要指标，本课程会以弹窗组件为例</p>
					</div>
					<div class="course-intro__grade">
						<span>
							难度: {{course.difficulty}}
						</span>
						<span>
							时长: {{course.time}}
						</span>
						<span>
							人数: {{course.seenum}}
						</span>
						<span>
							评分: {{course.grade}}
						</span>
					</div>
				</div>
				<div class="scroll-wrap" ref="wrapper" v-show="curType == 'list'">
					<ul class="scroll-content">
						<li class="course-main-item">
							<p class="course-main-title">
								<span>第1章 组件种类和JS分层</span>
							</p>
							<ul class="course-sub-item">
								<li class="course-sub-item__content course-sub-item__active">
									<a href="javascript:;">
										<span class="play-icon"></span>
										<span class="course-sub-item__title">1-1 组件种类和JS分层</span>
										<span class="play-status-icon play-status__studied"></span>
									</a>
								</li>
							</ul>
						</li>
						<li class="course-main-item">
							<p class="course-main-title">
								<span>第1章 组件种类和JS分层</span>
							</p>
							<ul class="course-sub-item">
								<li class="course-sub-item__content course-sub-item__active">
									<a href="javascript:;">
										<span class="play-icon"></span>
										<span class="course-sub-item__title">1-1 组件种类和JS分层</span>
										<span class="play-status-icon"></span>
									</a>
								</li>
							</ul>
						</li>
						<li class="course-main-item">
							<p class="course-main-title">
								<span>第1章 组件种类和JS分层</span>
							</p>
							<ul class="course-sub-item">
								<li class="course-sub-item__content course-sub-item__active">
									<a href="javascript:;">
										<span class="play-icon"></span>
										<span class="course-sub-item__title">1-1 组件种类和JS分层</span>
										<span class="play-status-icon"></span>
									</a>
								</li>
							</ul>
						</li>
						<li class="course-main-item">
							<p class="course-main-title">
								<span>第1章 组件种类和JS分层</span>
							</p>
							<ul class="course-sub-item">
								<li class="course-sub-item__content course-sub-item__active">
									<a href="javascript:;">
										<span class="play-icon"></span>
										<span class="course-sub-item__title">1-1 组件种类和JS分层</span>
										<span class="play-status-icon"></span>
									</a>
								</li>
							</ul>
						</li>
						<li class="course-main-item">
							<p class="course-main-title">
								<span>第1章 组件种类和JS分层</span>
							</p>
							<ul class="course-sub-item">
								<li class="course-sub-item__content course-sub-item__active">
									<a href="javascript:;">
										<span class="play-icon"></span>
										<span class="course-sub-item__title">1-1 组件种类和JS分层</span>
										<span class="play-status-icon"></span>
									</a>
								</li>
							</ul>
						</li>
						<li class="course-main-item">
							<p class="course-main-title">
								<span>第1章 组件种类和JS分层</span>
							</p>
							<ul class="course-sub-item">
								<li class="course-sub-item__content course-sub-item__active">
									<a href="javascript:;">
										<span class="play-icon"></span>
										<span class="course-sub-item__title">1-1 组件种类和JS分层</span>
										<span class="play-status-icon"></span>
									</a>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</div>

	</div>
</template>

<style lang="scss">
	.my-video-box{
		position:relative;
		z-index: 9;
	}
    .video-js .vjs-big-play-button{
		height: 50px;
		width: 50px;
		top: 50%;
		left: 50%;
		margin-left: -25px;
		margin-top: -25px;
		border-radius: 50%;
		-webkit-border-radius: 50%;
    }

    .course-func-tab{
    	.learn-menu{
    		display: flex;
		    background: #FFFFFF;
		    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.10);
		    height: 44px;

			-webkit-padding-start: 0px;
			-webkit-margin-before: 0em;
    		-webkit-margin-after: 0em;
			a{
				position: relative;
			    flex: 1;
			    font-size: 13px;
			    line-height: 44px;
			    color: #71777D;
			    letter-spacing: 0;
			    text-align: center;

			    &.active::before{
				    position: absolute;
				    left: 50%;
				    bottom: 0;
				    margin-left: -12px;
				    content: ' ';
				    background: #FF2D50;
				    width: 24px;
				    height: 2px;
			    }
			}
    	}
    	
    }

    .course-list{
    	width: 100%;
    	position: fixed;
    	top: 310px;
    	bottom: 50px;
    	z-index: -1;
    	padding: a(40px);
    	padding-top: a(60px);
    	overflow: hidden;

    	.scroll-wrap{
    		@include wh(100%,100%);
    	}

    	.course-main-item{
    		margin-bottom: 25px;
    		.course-main-title{
    			font-size: a(24px);
    			margin-bottom: 20px;
    		}
    	}
    	.course-sub-item{
			.course-sub-item__content{
				position: relative;
			    height: a(80px);
			    line-height: a(80px);
			    padding: 0 a(60px) 0 a(60px);
			    background: #fff;
			    color: #71777d;
			    box-shadow: 0 1px 1px 1px #e0e3e6;
			    border-radius: 5px;

			    .play-icon{
					position: absolute;
				    top: a(34px);
				    left: a(24px);
				    margin-top: -2px;
				    margin-left: 0px;
				    width: 10px;
				    height: 10px;
				    background: url('~__assets/images/icon/play.png') no-repeat;
				    background-position: 0 -137px;
			    }
			    .play-status-icon{
				    position: absolute;
				    right: a(20px);
				    margin-top: -4px;
				    top: a(34px);
				    width: 12px;
				    height: 12px;
				    background: url('~__assets/images/icon/play.png') 0 -330px;

				    &.play-status__studied{
				    	background-position: 0 -288px;
				    }
			    }
			}
    	}

    	.course-sub-item__active{
    		.course-sub-item__title{
    			color:#84c00b;
    			font-weight: bold;
    		}
    	}
    }
    
    .header-component{
    	float:right;
    	height: 100%;
    }

    .share-btn{
    	display: inline-block;
    	float: left;
    	margin-top: a(32px);
    	@include wh(a(32px),a(32px));
    	@include bg('~__assets/images/icon/share1.png');
    }
</style>

<script>
	import { mapGetters } from 'vuex'
	import 'video.js/dist/video-js.css'
	import { videoPlayer } from 'vue-video-player'
	import pageHeader from '@/components/pageHeader'
	import BScroll from 'better-scroll'
	export default{
		name: 'course-detail-view',
		components: {
			videoPlayer,pageHeader
		},
		data() {
	      return {
	      	curType:'intro',
	      	course:{
	      		difficulty: '中级',
	      		time: '3h0m',
	      		seenum: '21111',
	      		grade: '9.9'
	      	},
	        playerOptions: {
	          // videojs options
	          //fluid: true, //自适应大小	
	          width: this.$store.state.system.device.screenWidth,
	          height: this.$store.state.system.device.screenWidth*9/16,
	          muted: false, //静音
	          language: 'cn',
	          preload: 'auto',
	          playbackRates: [0.7, 1.0, 1.5, 2.0],
	          sources: [{
	            type: "video/mp4",
	            src: "http://upload.youquyou.cc/static/data/he.mp4"
	          }],
	          poster: "https://ss3.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=06f18776399b033b3388fada25cf3620/77c6a7efce1b9d162f210013fedeb48f8d5464da.jpg",
	        }
	      }
	    },
	    mounted() {
	      console.log('this is current player instance object', this.player);
	      this.$nextTick(()=>{
	      	this.scroll = new BScroll( this.$refs.wrapper, {})
	      })
	      console.log(this.$store.state.system.device.screenWidth)
	    },
	    computed: {
	      player() {
	        return this.$refs.videoPlayer.player
	      }
	    },
	    methods: {
	      // listen event
	      onPlayerPlay(player) {
	        // console.log('player play!', player)
	      },
	      onPlayerPause(player) {
	        // console.log('player pause!', player)
	      },
	      // ...player event

	      // or listen state event
	      playerStateChanged(playerCurrentState) {
	        // console.log('player current update state', playerCurrentState)
	      },

	      // player is ready
	      playerReadied(player) {
	        console.log('the player is readied', player)
	        // you can use it to do something...
	        // player.[methods]
	      }
	    }
	}
</script>